<template>
    <div class="el-color-picker-select el-select el-select--mini">
        <el-dropdown ref="colorPickerDropdown" style="width: 100%;" trigger="click"
                     @visible-change="handleVisible">
        <span class="el-dropdown-link">
          <div
              :class="visible ? 'el-input el-input--mini el-input--suffix' : 'el-input el-input--mini el-input--suffix is-focus'">
            <input :placeholder="option==''?'请选择':''" :style="{backgroundColor:option}" autocomplete="off" class="el-input__inner"
                   readonly="readonly" type="text">
            <span class="el-input__suffix">
              <span class="el-input__suffix-inner">
                <i v-if="visible" class="el-select__caret el-input__icon el-icon-arrow-up is-reverse"/>
                <i v-else class="el-select__caret el-select__caret el-input__icon el-icon-arrow-up"/>
              </span>
            </span>
          </div>
        </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item style="padding:0px;background:#fff">
                    <div style="cursor: default;padding:10px;padding-bottom: 0px;" @click.stop="">
                        <table>
                            <tbody>
                            <tr v-for="(arr,i) in colors" :key="i">
                                <td v-for="(color,j) in arr" :key="j" @click="changeColor(color)">
                                    <div :style="{backgroundColor:color}" class="x-spreadsheet-color-palette-cell"/>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <div
                            style="padding-bottom: 6px;margin-top: 5px;padding-top: 8px;border-top: 1px solid #dcdfe6;text-align: right;">
                            <el-input v-model="custom" placeholder="rgb(0, 1, 0)"
                                      style="width: 165px;"></el-input>
                            <el-button plain style="margin-left: 10px;margin-right: 4px;"
                                       @click="saveColor()">确 定
                            </el-button>
                        </div>
                    </div>
                </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script lang="ts" setup>
const model = ref({
    prop: 'value',
    event: 'change'
})
const colorPickerDropdown = ref()
const emits = defineEmits(["change"])
const visible = ref<Boolean>(false)
const option = ref<String>("")
const custom = ref<String>("")
const colors = ref<any>([
    ['rgb(255,255,255)', 'rgb(0,1,0)', 'rgb(231,229,230)', 'rgb(68,85,105)', 'rgb(91,156,214)', 'rgb(237,125,49)', 'rgb(165,165,165)', 'rgb(255,192,1)', 'rgb(67,113,198)', 'rgb(113,174,71)'],
    ['rgb(242,242,242)', 'rgb(127,127,127)', 'rgb(208,206,207)', 'rgb(213,220,228)', 'rgb(222,234,246)', 'rgb(252,229,213)', 'rgb(237,237,237)', 'rgb(255,242,205)', 'rgb(217,226,243)', 'rgb(227,239,217)'],
    ['rgb(216,216,216)', 'rgb(89,89,89)', 'rgb(175,171,172)', 'rgb(173,184,202)', 'rgb(189,215,238)', 'rgb(247,204,172)', 'rgb(219,219,219)', 'rgb(255,229,154)', 'rgb(179,198,231)', 'rgb(197,224,179)'],
    ['rgb(191,191,191)', 'rgb(63,63,63)', 'rgb(117,111,111)', 'rgb(133,150,176)', 'rgb(156,194,230)', 'rgb(244,177,132)', 'rgb(201,201,201)', 'rgb(254,217,100)', 'rgb(142,170,218)', 'rgb(167,208,140)'],
    ['rgb(165,165,165)', 'rgb(38,38,38)', 'rgb(58,56,57)', 'rgb(51,63,79)', 'rgb(46,117,181)', 'rgb(196,90,16)', 'rgb(123,123,123)', 'rgb(191,142,1)', 'rgb(47,85,150)', 'rgb(83,129,54)'],
    ['rgb(127,127,127)', 'rgb(12,12,12)', 'rgb(23,21,22)', 'rgb(34,42,53)', 'rgb(31,78,122)', 'rgb(132,60,10)', 'rgb(82,82,82)', 'rgb(126,96,0)', 'rgb(32,56,100)', 'rgb(54,86,36)'],
    ['rgb(192,0,0)', 'rgb(254,0,0)', 'rgb(253,193,1)', 'rgb(255,255,1)', 'rgb(147,208,81)', 'rgb(0,176,78)', 'rgb(1,176,241)', 'rgb(1,112,193)', 'rgb(1,32,96)', 'rgb(112,48,160)']
])
const props = defineProps({
    value: {
        type: String,
        default: () => {
            return ''
        }
    }
})

watch(() => props.value, (val) => {
    option.value = val
})
option.value = props.value

function saveColor() {
    if (!custom.value) {
        return ElMessage.error("请输入颜色值");
    }
    const customThis = custom.value.toLocaleLowerCase().trim().replace(/' '/, '')
    let valid = true
    valid = valid && customThis.startsWith('rgb(') && customThis.endsWith(")")
    const arr = customThis.replace("rgb(", '').replace(')', '').split(',')
    valid = valid && arr.length === 3
    for (const val of arr) {
        valid = valid && checkColorValue(val.trim())
    }
    if (!valid) {
        return ElMessage.error('颜色值不合法');
    }
    const color = `rgb(${parseInt(arr[0].trim())},${parseInt(arr[1].trim())},${parseInt(arr[2].trim())})`
    changeColor(color)
}

function checkColorValue(val) {
    return !isNaN(val) && parseInt(val) <= 255 && parseInt(val) >= 0
}

function handleVisible(visible) {
    visible.value = visible
    if (visible) {
        custom.value = option.value
    }
}

function changeColor(color) {
    option.value = color
    emits('change', color)
    colorPickerDropdown.value.hide()
}
</script>
